import { useIntersectionObserver } from "@vueuse/core";


// 定义懒加载插件
export const lazyPlugin = {
    install(app) {
        app.directive('img-lazy', {
            mounted(el, binding) {
                // el: 代表绑定该指令的元素 => img
                // binding: binding.value => v-img-lazy="item.picture" 即 item.picture
                const {stop} = useIntersectionObserver(
                    el,
                    ([{isIntersecting}]) => {
                        // 进入可视区域, 开始加载图片
                        if (isIntersecting) {
                            el.src = binding.value
                            stop() // 在第一次加载完成后停止监听
                        }
                    },
                );
            }
        })
    }
}